import type { ElTreeSelect } from 'element-plus'
import { reactive, toRefs } from 'vue'

import { type ITreeNode, menuApi } from '@/apis'

export type MenuTreeRef = InstanceType<typeof ElTreeSelect>

export function useMenuTree() {
  const state = reactive({
    menuTreeRef: undefined as Undefined<MenuTreeRef>,
    menuTree: [] as ITreeNode[],
    defaultCheckedKeys: [] as string[],
    treeLoading: false
  })

  /**
   * 获取菜单树
   */
  async function getMenuTree() {
    state.treeLoading = true

    const data = await menuApi.getMenuTree()
    state.menuTree = [{ key: '0', title: '主类目', children: data }]

    state.treeLoading = false
  }

  return {
    ...toRefs(state),
    getMenuTree
  }
}
